<template>
  <div class="feedback-page" >
    <el-table :data="tableData" stripe style="width: 100%" v-loading="tableLoading"
        border
    >
    <el-table-column prop="phone" label="手机号码" width="130" />
    <el-table-column label="反馈图片" width="120px">
        <template #default="scope">
          <el-button style="height: 60px;width: 60px" type="danger" size="small" >
            <el-image style="width: 60px;height:60px" 
              :src="scope.row.url" 
              :preview-teleported="true"
              :preview-src-list="[...scope.row.urlList]"></el-image>
          </el-button>
        </template>
      </el-table-column>
    <el-table-column prop="content" label="反馈内容" min-width="220" >
      <template #default="scoped">
          <div style="overflow: hidden;text-overflow:ellipsis; white-space: nowrap;">{{ scoped.row.content }}</div>
        </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="240" />
    <el-table-column label="操作" min-width="80px" fixed="right">
        <template #default="scope">
          <el-button type="danger" size="small" @click.prevent="showRemoveDialog(scope.row)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  <div class="pagination-field">
    <el-pagination  
      v-model:current-page="formData.pageIndex"
      v-model:page-size="formData.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog v-if="removeDialogVisible" v-model="removeDialogVisible" title="删除用户反馈" width="400px">
      <div style="color: #f00">确定要删除当前用户反馈？</div>
      <template #header>
        <div style="font-weight: bold">删除用户反馈</div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="default" @click="removeDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="startRemoveDevice"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from "element-plus";
import { getFeedbackPagination,removeFeedback } from "@/api/system-manage.api";

const formData = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

const tableLoading = ref(false);
const tableData = ref([]);
const curSelectRow = ref({
  id: ''
});

const removeDialogVisible = ref(false);
const showRemoveDialog = (item: any) => {
  removeDialogVisible.value = true;
  curSelectRow.value = item;
  console.log("item: ", item);
};
const startRemoveDevice = () => {
  let id = curSelectRow.value.id;
  removeFeedback([id])
    .then(() => {
      console.log("success~~~~~");
      removeDialogVisible.value = false;
      ElMessage({
        message: "用户反馈删除成功",
        type: "success",
      });
      getDataList();
    })
    .catch((err) => {
      removeDialogVisible.value = false;
      ElMessage({
        message: err.msg || err,
        type: "error",
      });
    });
};




const handleSizeChange = ( value:number )=>{
  console.log("handleSizeChange...", value)
  formData.pageSize = value;
  getDataList();
  
}

const handleCurrentChange = ( value:number )=>{
  console.log("handleCurrentChange...",value)
  formData.pageIndex = value;
  getDataList();
}

const getDataList = ()=>{
  tableLoading.value = true;
  getFeedbackPagination({
    pageSize: formData.pageSize,
    pageIndex: formData.pageIndex
  }).then( function(res:any){

    tableLoading.value = false;
     console.log(res)
     let list = res.list || [];
     list = list.map( item=>{
      let url = item.url;
      if( url ){
        item.urlList = url.split("#####")
        item.url = item.urlList[0];
      }
      return item
     })
     tableData.value = res.list || []

     formData.total = Number(res.total);
     formData.pageIndex = Number( res.pageIndex);
     formData.pageSize  = Number(res.pageSize);
  }).catch( error=>{
    console.log(error)
    tableLoading.value = false;
  } )
}

onMounted(()=>{
  getDataList();
})

</script>
<style lang="scss" scoped>
.feedback-page {
  margin-top: 8px;
  height: 100%;
  background-color: #fff;
  padding: 20px 20px 0 20px;
  border-radius: 8px;
}

.pagination-field {
  background: #fff;
  padding: 20px 0 20px 0;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
}

</style>
